<template>
  <div class="item" @click="toDetail(item._id,item.title)">
      <img :src="item.pic" alt="">
      <p>{{item.title}} </p>
      <div class="star">
          <span v-for="val of item.star" :key="val">
              <img v-if="val>=1.5" src="../../assets/images/star.png" alt="">
              <img v-else-if="val>=1" src="../../assets/images/none-star.png" alt="">
              <img v-else src="../../assets/images/ban.png" alt="">
          </span>
          {{item.rating?item.rating:item.raiting}}
      </div>
  </div>
</template>

<script>
export default {
    props:{
        item:{
            type:Object
        }
    },
    methods: {
      toDetail(id,title){
          this.$emit("toggle",id,title)
      }  
    },

}
</script>

<style scoped>
.item img{
  width: 260px;
  height: 300px;
}
.item{
    padding: 20px;
    font-size: 30px;
}
.star img{
    width: 35px;
    height: 35px;
}
</style>